{% extends "explorer/base.html" %}

{% load explorer_tags %}
{% load i18n %}

{% block head_title %}{% trans "SQL Query" %}{% endblock head_title %}

{% block sql_explorer_content %}
<div class="row">
  <div id="query_area" class="query-area col-md-12">
    <h2>{% if query %}{{ query.title }}{% if shared %}<small>&nbsp;&nbsp;shared</small>{% endif %}{% else %}{% trans "New Query" %}{% endif %}</h2>
    {% if query %}
      <div class="text-right">
        <a href="{% url "explorer_logs" %}?query_id={{ query.id }}"><h2 class="small">{% trans "History" %}</h2></a>
      </div>
    {% endif %}
    {% if message %}
      <div class="alert alert-info">{{ message }}</div>
    {% endif %}
    <div>

    {% if query %}
      <form role="form" class="form-horizontal" action="{% url "query_detail" query.id %}" method="post" id="editor">{% csrf_token %}
    {% else %}
      <form role="form" class="form-horizontal" action="{% url "query_create" %}" method="post" id="editor">{% csrf_token %}
    {% endif %}

        {% if error %}
          <div class="alert alert-danger">{{ error|escape }}</div>
        {% endif %}

        {{ form.non_field_errors }}

        <div class="form-group">
          {% if form.title.errors %}{% for error in form.title.errors %}
            <div class="alert alert-danger">{{ error|escape }}</div>
          {% endfor %}{% endif %}
          <label for="id_title" class="col-sm-2 control-label">{% trans "Title" %}</label>
          <div class="col-sm-10">
            <input class="form-control" id="id_title" maxlength="255" name="title" type="text" {% if not can_change %}disabled{% endif %} value="{{ form.title.value|default_if_none:"" }}" />
          </div>

        {% if form.connections|length > 1 and can_change %}
          </div>
          <div class="form-group">
            <label for="id_connection" class="col-sm-2 control-label">Connection</label>
            <div class="col-sm-10">
              {{ form.connection }}
            </div>
        {% else %}
          {# still need to submit the connection, just hide the UI element #}
          <div class="hidden">
            {{ form.connection }}
          </div>
        {% endif %}
        </div>

        <div class="form-group">
          {% if form.description.errors %}
            <div class="alert alert-danger">{{ form.description.errors }}</div>
          {% endif %}
          <label for="id_description" class="col-sm-2 control-label">{% trans "Description" %}</label>
          <div class="col-sm-10">
            <textarea class="form-control" cols="40" id="id_description" name="description" {% if not can_change %}disabled{% endif %} rows="2">{{ form.description.value|default_if_none:"" }}</textarea>
          </div>
        </div>

          <input type="hidden" id="id_created_by_user" name="created_by_user" value="{{ form.created_by_user_email }}" />
          {% if form.sql.errors %}
            {% for error in form.sql.errors %}
              <div class="alert alert-danger">{{ error|escape }}</div>
            {% endfor %}
          {% endif %}

          <div class="panel panel-default sql-panel">
            <div class="panel-heading">
              <div class="row">
                <div class="col-md-6">
                  <span class="panel-title">{% trans "SQL" %}</span>
                </div>
                <div class="col-md-6 text-right">
                  {% if query and can_change %}
                  <small><a href="#" title="{% trans "Open in playground" %}" id="playground_button"><i class="glyphicon glyphicon-new-window"></i></a></small>
                  {% endif %}
                </div>
              </div>
            </div>
            <div class="panel-content">
              {% if params %}
                {% include 'explorer/params.html' %}
              {% endif %}
              <textarea class="form-control" {% if not can_change %} readonly disabled {% endif %} cols="40" id="id_sql" name="sql" rows="1">{{ form.sql.value|default_if_none:"" }}</textarea>
            </div>
          </div>

          <div class="form-group">
            <div class="text-center">
              {% if can_change %}
                <div class="btn-group">
                  <input type="submit" value="Save & Run" class="btn btn-default" id="save_button" />
                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="caret"></span>
                    <span class="sr-only">{% trans "Toggle Dropdown" %}</span>
                  </button>
                  <ul class="dropdown-menu">
                    {% export_buttons query %}
                    <li role="separator" class="divider"></li>
                    <li><input type="submit" value="Save Only" class="btn btn-link" id="save_only"/></li>
                  </ul>
                </div>
                <button type="button" class="btn btn-default" id="show_schema_button">{% trans "Show Schema" %}</button>
                <button type="button" class="btn btn-default" id="hide_schema_button" style="display: none;">{% trans "Hide Schema" %}</button>
                <button type="button" class="btn btn-default" id="format_button">Format</button>
              {% else %}
                <input type="submit" value="Refresh" class="btn btn-default" id="refresh_button" />
                <div class="btn-group">
                  <label class="btn btn-default" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{% trans "Download" %}</label>
                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="caret"></span>
                    <span class="sr-only">{% trans "Toggle Dropdown" %}</span>
                  </button>
                  <ul class="dropdown-menu">
                    {% export_buttons query %}
                  </ul>
                </div>
              {% endif %}
            </div>
          </div>
      </form>
      {% include 'explorer/preview_pane.html' %}
      <div class="row">
        <div class="col-md-6">
          {% if query and can_change and tasks_enabled %}
          {{ form.snapshot }} {% trans "Snapshot" %}
          {% endif %}
        </div>
        <div class="col-md-6 text-right">
          <small>
            {% if query.avg_duration %}
              {% blocktrans with query_avg_duration=query.avg_duration|floatformat:2 user_email=form.created_by_user_email created_time=form.created_at_time %}
                Avg. execution: {{ query_avg_duration }}ms. Query created by {{ created_by_user_email }} on {{ created_time }}.
              {% endblocktrans %}
            {% endif %}
          </small>
        </div>
      </div>
    </div>
  </div>


  <div id="schema" style="display: none;">
    <iframe src="" height="665px" style="border: 1px solid #CCC;" frameBorder="0" id="schema_frame"></iframe>
  </div>

</div>

{% endblock %}

{% block sql_explorer_scripts %}
    var e = new explorer.ExplorerEditor(queryId);
{% endblock %}
